<script setup>

const emit = defineEmits(['sizeChange', 'selectPage'])

const props = defineProps({
    total: Number,
    pageNum: Number,
    pageSize: Number,
    left: Boolean
})

const sizeChange = (size) => {
    emit('sizeChange', size)
}

const selectPage = (pageNo) => {
    emit('selectPage', pageNo)
}

</script>

<template>
    <div class="flex-align-between">
        <slot v-if="!left">
            <div></div>
        </slot>
        <el-pagination background size="small" :pager-count="5" @size-change="sizeChange" @current-change="selectPage" :current-page="pageNum" :page-sizes="[20, 50, 100, 200]"
            :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
        <slot v-if="left">
            <div></div>
        </slot>
    </div>
</template>